<template>
	<view>
		<view class="cart-container" v-if="goods_list.length !== 0">
			<view class="my-settle-container">
				<label class="radio" @click="changeAllState">
					<radio color="#ff7d00" :checked="isFullCheck" /><text>全选</text>
				</label>
				<view class="btn-delete" @click="deleteChecked">删除({{checkedCount}})</view>
			</view>
			<!-- 商品列表区域 -->
			<uni-swipe-action>
				<block v-for="(goods, i) in goods_list" :key="i">
					<uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler(goods.id)">

						<my-goods :goods="goods" @radio-change="radioChangeHandler"
							@num-change="numberChangeHandler"></my-goods>

					</uni-swipe-action-item>
				</block>
			</uni-swipe-action>
		</view>
		<!-- 空白购物车区域 -->
		<image src="../../../static/empty_img/obj_empty.png" style="width: 100%;margin-top: 30%;" mode="widthFix"
			v-else>
		</image>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'

	export default {
		computed: {
			...mapState('cart', ['goods_list']),
			// 将 total 映射到当前组件中
			...mapGetters('cart', ['total', 'checkedCount']),
			// 是否全选
			isFullCheck() {
				return this.total === this.checkedCount
			},
		},
		data() {
			return {
				// 滑动删除的配置
				options: [{
					text: '删除', // 显示的文本内容
					style: {
						backgroundColor: '#c00000' // 按钮的背景颜色
					}
				}]
			};
		},
		methods: {
			...mapMutations('cart', ['updateGoodsState', 'updateGoodsCount', 'removeGoodsById', 'updateAllGoodsState',
				'removeCheckedGoods'
			]),

			// 事件处理
			// 修改购物车中所有商品的选中状态
			changeAllState() {
				this.updateAllGoodsState(!this.isFullCheck)
			},
			// 商品的勾选状态发生了变化
			radioChangeHandler(e) {
				this.updateGoodsState(e)
			},
			// 商品的数量发生了变化
			numberChangeHandler(e) {
				this.updateGoodsCount(e)
			},
			// 点击了滑动操作按钮
			swipeActionClickHandler(id) {
				this.removeGoodsById(id)
			},
			// 删除已选
			deleteChecked() {
				this.removeCheckedGoods()
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss">
	.cart-container {
		padding-top: 50px;

		.my-settle-container {
			background-color: #fff;
			z-index: 999;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 5px;
			font-size: 14px;
			border-bottom: thick double #32a1ce;

			.radio {
				display: flex;
				align-items: center;
			}

			.btn-delete {
				height: 40px;
				min-width: 100px;
				background-color: #c00000;
				color: white;
				line-height: 40px;
				text-align: center;
				border-radius: 20rpx;
				margin-right: 10px;
			}
		}

		.cart-title {
			height: 40px;
			display: flex;
			align-items: center;
			font-size: 14px;
			padding-left: 5px;
			border-bottom: 1px solid #efefef;

			.cart-title-text {
				margin-left: 10px;
			}
		}
	}
</style>